<template>
	<div>
		<div class="header">
			<div class="icon-left" @click="$router.goBack()"><img src="../../static/img/icon/release_icon/return@2x.png"/></div>
			新增收货地址
			<div class="null"></div>
		</div>
		<div class="header-null"></div>
		<form class="mui-input-group">
			<div class="mui-input-row">
				<input type="text" name="" id="" value="" v-model="consignee" placeholder="收货人姓名"/>
			</div>
			<div class="mui-input-row">
				<input type="number" name="" id="" value="" v-model="contactWay"  placeholder="手机号码"/>
			</div>
			<!--<div class="mui-input-row">
				<input type="text" name="" id="" value=""  placeholder="邮政编码"/>
			</div>-->
			<div class="mui-input-row" ref="cityPicker" @click="picker">
				<div class="mui-table-view-cell">					
					<a class="mui-navigate-right">{{city}}</a>
				</div>
			</div>
			<div class="mui-input-row">
				<textarea style="padding-top: 10px;" rows="2" placeholder="   详细地址" v-model="contactAddress"></textarea>
			</div>
		</form>
		<div @click="check = !check" class="address">
			<img v-if="!check" src="../../static/img/icon/release_icon/weixuanzhong@2x.png"/>
			<img v-else src="../../static/img/icon/release_icon/nextstep@2x.png"/>
			默认地址
		</div>
		<div class="newsAddress-fixed" @click="submit">
			保存
		</div>
	</div>
</template>

<script>
	import {getData} from '../service/getData'
	export default {
		data() {
			return {
				city: '省、市、区',
				consignee: '',
				contactWay: '',
				contactAddress: '',
				check: false
			}
		},
		methods: {
			picker() {  //地区选择
				var cityPicker3 = new mui.PopPicker({
					layer: 3
				});
				cityPicker3.setData(cityData3);
				var _this = this
				cityPicker3.show(function(items) {
					_this.city =  items[0].text + " " + items[1].text + " " + items[2].text;
					//返回 false 可以阻止选择框的关闭
					//return false;
				});
			},
			submit() { //修改
				this.$store.state.isLoading = true
				var city = this.city.split(' ')
				getData('/useraddress/addUserAddressApi', {
					userId: sessionStorage.userId,
					consignee: this.consignee,
					contactWay: this.contactWay,
					contactAddress: this.contactAddress,
					province: city[0],
					city: city[1],
					district: city[2],
					isDefaultAddress: this.check ? 1 : 0
				}).then(d => {
					this.$store.state.isLoading = false
					if(d.code == 1) {
						this.$router.goBack()
					} else {
						//alert(d.msg)
					}
				}).catch(err => {
					this.$store.state.isLoading = false
					console.log(err)
				})
			}
		},
		mounted() {
			mui('.mui-input-row input').input(); 
		}
	}
</script>

<style scoped lang="less">

	.mui-input-row {
		font-size: 16px;
	}
	
	.newsAddress-fixed {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 10px 0;
		text-align: center;
		background: #ff1747;
		color: #fff;
	}
	
	.address {
		display: flex;
		align-items: center;
		background: #fff;
		margin-top: 10px;
		height: 40px;
		padding: 0 15px;
		
		img {
			width: 20px;
			height: 20px;
			margin-right: 10px;
		}
	}
</style>